import React, { Component, PropTypes } from 'react';
import Echarts from 'echarts';
import Moment from 'moment';
import { connect } from 'dva'
import {
  Input,
  Button,
  Select,
  Form,
  Modal,
  Row,
  Col,
  Icon,
  message,
} from 'antd';
import Style from './home.less';
import NumberPlay from '../../util/numberPlay';
import $ from 'jquery';
import Service from "../../service";
const FormItem = Form.Item;
const createForm = Form.create;
const Option = Select.Option;

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      data: [],
      page: 1,
      pageSize: 15,
      loading: 'none'
    };
  }
  componentDidMount() {
    let self = this;
    const mobile_token = localStorage.getItem('token');
    const token = localStorage.getItem('token');
    self.props.queryPersonalList({ token: token, page: 1, page_size: 100 })
    self.props.queryList({
      params: {
        token: token,
        page: self.state.page,
        limit: self.state.pageSize
      },
      func: function (data) {
        console.log(data)
      }
    })
    // self.props.queryPersonalList({ token: token, page: 1, page_size: 1000, company: value })

    $(window).scroll(function () {
      let totalNum = self.props.totalPage;
      let currentNum = self.state.page * self.state.pageSize;
      // console.log($(window).scrollTop()+$(window).height())
      // console.log($(document).height())
      if ($(window).scrollTop() + $(window).height() + 1 >= $(document).height()) {
        // console.log(self.props.msgmore)
        if (self.props.msgmore) {
          self.pageMore(self.state.page);
        }

      }
    });

  }
  componentWillUnmount() {
    if (this.state.timer != null) {
      clearInterval(this.state.timer);

    }
  }
  pageMore = (page) => {
    var self = this;
    const token = localStorage.getItem('token');
    self.setState({
      page: page + 1
    }, function () {
      // console.log(this.state.page);
      self.props.queryList({
        params: {
          token: token,
          page: self.state.page,
          limit: self.state.pageSize
        },
        func: function (data) {

        }
      })
    });
  }
  mindexurlFun = () => {
    this.context.router.push(`/1/app/mindex`);
  }
  mapurlFun = () => {
    this.context.router.push(`/1/app/mmap`);
  }
  returnFun = () => {
    this.context.router.push(`/1/app/mmap`);
  }
  // 搜索
  searchFun = () => {
    let self = this;
    const token = localStorage.getItem('token');
    if (self.state.searchValue) {
      self.props.queryPersonalList({ token: token, page: 1, page_size: 1000, keywords: self.state.searchValue })
    }
  }
  // 
  searchInputFun = (e) => {
    let self = this;
    self.setState({
      searchValue: e.target.value
    })
  }
  // 跳转回地图显示
  mapurlFun = (item) => {
    // console.log(item)
    this.props.savePersonalSelect(item);
    let Status = this.props.Status;
    if (Status && Status.page == 'mpersonal') {
      self.context.router.push(`/1/app/mpersonal`)
    } else {
      self.context.router.push(`/1/1/app/mmap`)
    }
  }
  // 显示
  showFun = (record) => {
    let self = this;
  }
  render() {
    const { getFieldDecorator } = this.props.form;
    const { msglist, personaldata } = this.props;
    let decoratedata = (personaldata && personaldata.length > 0) ? personaldata : [];

    // console.log(personaldata);
    return (
      <div className={Style.wrap} style={{ minHeight: '500px' }}>
        <div className={Style.headWrap}>
          <div className={Style.navTitle}>
            <span className={Style.arrow} onClick={this.returnFun}>
              <Icon type="left" />
            </span>
            <span className={Style.navInput}><Input onChange={this.searchInputFun} /></span>
            <span className={Style.arrowEdit} onClick={this.searchFun} style={{ color: '#3096FA' }}>搜索</span>
          </div>
        </div>

        <div className={Style.messageScreen}>
          <div className={Style.messageWrap}>
            {
              decoratedata.map((item, i) => (
                <div className={Style.item} onClick={this.mapurlFun.bind(this, item)}>
                  {item.address} {item.realname}  {item.number}
                </div>
              ))
            }

          </div>
        </div>


      </div>
    )
  }
}

App.contextTypes = {
  router: React.PropTypes.object
}

function mapStateToProps(state, ownProps) {
  // console.log(state)
  return {
    msglist: state.mmodel.msgList,
    Status: state.myHome.status,
    personaldata: state.mmodel.personallist,
    msgmore: state.mmodel.msgmore,
    loading: !!state.loading.global
  }
}

function dispatchToProps(dispatch) {
  return {
    queryList(payload, params) {
      dispatch({ type: 'mmodel/msgserch', payload })
    },
    queryMsgList(payload = {}) { //消息列表
      dispatch({ type: 'mmodel/msgserch', payload })
    },
    queryPersonalList(payload = {}) {
      dispatch({ type: 'mmodel/Personalserch', payload })
    },
    savePersonalSelect(payload = {}) {
      dispatch({ type: 'mmodel/savePersonal', payload })
    }
  }
}
export default connect(mapStateToProps, dispatchToProps)(Form.create()(App));
